@hoverColor: #e2e2e2;

.wdu-navMenu {
    .wdu-border-light();
    .wdu-radius-normal();
    .out-shadow-light();
    background-color: white;
    min-width: 180px;
    font-size: 14px;
    padding: 0;
    overflow: hidden;

    .wdu-subNavMenu {
        padding: 0;
        box-shadow: none;
    }
}

@itemHeight: 50px;

.wdu-navMenuItem {
    height: @itemHeight;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    list-style: none;
    line-height: @itemHeight;
    color: rgb(68, 68, 68);

    &::first-child {
        border-top: none;
    }

    & > a {
        text-decoration: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: @itemHeight;
        color: currentColor;
    }

    & > i {
        position: absolute;
        right: 10px;
        top: calc(50% - 10px);
        transition: all 0.2s ease-out;
    }

    &:hover {
        background-color: @hoverColor;
    }

    &:first-child {
        border-top: none;
    }

    &__icon,
    &__label {
        display: inline-block;
    }

    &__label {
        text-decoration: none;
        line-height: @itemHeight;
        margin-right: 15px;
    }

    .wdu-icon-arrow {
        position: absolute;
        right: 0;
        top: 18px;
    }

    &__disabled {
        cursor: not-allowed;
        opacity: 0.5;

        a {
            cursor: not-allowed;
            pointer-events: none;
        }

        &:hover {
            transition: none;
            background-color: #ededed;
        }
    }

    &__active {
        .wdu-bg-important();
        color: white;
    }
}

.wdu-subNavMenu {
    padding: 5px 20px;
    margin: 0;
    border: unset;
    border-radius: 0;

    .wdu-navMenuItem {
        &__label {
            font-size: 14px;
            text-decoration: none;
        }

        &:first-child {
            &:hover {
                background-color: @hoverColor;
            }
        }
    }

    &__title {
        background-color: #ffffff;
    }

    &__items {
        background-color: #ededed;
        transition: width, height 0.2s ease-in-out;
        overflow: hidden;

        .wdu-subNavMenu__title {
            background-color: #ededed;
        }

        .wdu-navMenuItem:hover {
            background-color: @hoverColor;
        }
    }
}
